<template>
  <div class="Home">
    <el-container>
      <!-- 页面上下布局 -->
      <el-header style="height:40px;line-height:40px;font-size:20px;color:#ffffff">
        <el-col :span="4">&nbsp;</el-col>
        <el-col :span="8">接口自动化测试平台</el-col>
        <el-col :span="8">&nbsp;</el-col>
        <el-col :span="4" style="font-size:14px;">
          <el-dropdown @command="clickDropdownFunc">
            <span class="el-dropdown-link">
              admin
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command='a'>回到官网</el-dropdown-item>
              <el-dropdown-item command='b'>管理中心</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-header>
      <el-container>
        <!-- <el-aside width="70px"> -->
        <el-menu
          :default-active="activeIndex"
          router
          class="el-menu-vertical-demo"
          :collapse="iscollapse"
          style="margin-top:30px"
        >
          <el-menu-item index="/projectlist">
            <i class="el-icon-copy-document"></i>
            <span slot="title">项目管理</span>
          </el-menu-item>
          <el-menu-item index="/project/0">
            <i class="fa fa-arrows-alt" aria-hidden="true" style="margin-left:5px"></i>
            <span slot="title" style="margin-left:10px">接口管理</span>
          </el-menu-item>
          <el-menu-item index="/setting">
            <i class="el-icon-setting"></i>
            <span slot="title">系统设置</span>
          </el-menu-item>
        </el-menu>
        <!-- </el-aside> -->
        <el-main>
          <!-- <div class="leftDiv">
            <router-link to="apigroup"></router-link>
            <router-view></router-view>
          </div>
          <div class="rightDiv">
            <router-link to="apilist"></router-link>
            <router-view></router-view>
          </div>-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "/projectlist",
      iscollapse: false
    };
  },
  mounted() {
    //如果页面url包含project字符，则菜单高亮
    if (this.$route.path.search("/project/") != -1) {
      // console.log('页面加载指定菜单高亮')
      this.activeIndex = "/project/0"; //菜单高亮
    }
  },
  methods: {
    //菜单高亮
    activeMenu() {
      this.iscollapse = true;
      //路由监控，点击侧边导航栏进入分组，未指定当前项目，则获取最近一次进入的项目
      if (this.$route.path == "/project/0") {
        this.$router.push("/project/" + this.$store.state.PROJECT_ID);
      }
      //路由监控，路由改变时，对应菜单高亮
      //前进后退改变高亮
      if (this.$route.path.search("/projectlist") != -1) {
        this.activeIndex = "/projectlist"; //项目菜单高亮
        this.iscollapse = false;
      }
      if (this.$route.path.search("/project/") != -1) {
        // console.log('路由监控指定菜单高亮');
        this.activeIndex = "/project/0"; //菜单高亮
      }
    },
    clickDropdownFunc(item){
      if(item == 'a'){
        window.location.href = 'http://127.0.0.1:8000/index/'
      }
      if(item == 'b'){
        window.location.href = 'http://127.0.0.1:8000/project/list/'
      }
    }
  },
  watch: {
    $route: "activeMenu"
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.el-header {
  background: #409eff;
  text-align: center;
}
.el-aside {
  /* width: 100%; */
  /* height: 80vh; */
  /* border-right: 1px solid; */
}
.el-main {
  width: 100%;
  height: 100%;
  /* border-right: 1px solid; */
  padding: 0;
  margin: 0;
  position: relative;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 10%;
  min-height: 400px;
}
</style>
